<div class="bjui-pageHeader">
	<form id="pagerForm" data-toggle="ajaxsearch" action="{:url('')}" method="get">
		<div class="bjui-searchBar">
			<label>名称：</label>
			<input type="text" value="" name="code" size="10" />&nbsp;
			<button type="submit" class="btn-default" data-icon="search">查询</button>
			&nbsp; 
			<a class="btn btn-orange" href="javascript:;" data-toggle="reloadsearch" data-clear-query="true" data-icon="undo">清空查询</a>&nbsp;
			<div class="pull-right">
				<input type="checkbox" name="lookupType" value="1" data-toggle="icheck" data-label="追加" checked>
			</div>
		</div>
	</form>
</div>
<div class="bjui-pageContent">
<div class="container-fluid">

		<div class="row">
			<div class="col-md-5">
				<input type="upload" name='upload' data-name="upload_ids" data-toggle="webuploader"
					data-options="
	                        {
	                            pick: {label: '{:\\think\\facade\\Lang::get('_show_upload_info_')}'},
	                            server: '{:url('Picture/upload')}',
	                            fileNumLimit: {$file_limit},
	                            formData: {dir:'custompic',test:'test_value'},
	                            required: true,
	                            uploaded: '{$uploaded}',/*已经存在*/
	                            basePath: '',
	                            accept: {
	                                title: '图片',
	                                extensions: 'jpg,png',
	                                mimeTypes: '.jpg,.png'
	                            }
	                        }">
			</div>
			<div class="col-md-7">
				<blockquote>
					<p>说明事项</p>
				</blockquote>
			</div>
		</div><br>
		<div class="panel panel-success">
			<div class="panel-heading">已经上传的图片</div>
			<div class="panel-body">
				<div class="row">
					{volist name='has_picture' id='vo'}
						<div class="col-md-2">
						
							<div class="thumbnail" id="thumb_div_{$vo.id}" onclick="picture_check_uploaded({$vo.id})">
								<span id='show_check_{$vo.id}' class="check_upload"></span>
								<input type="hidden" id='' name="" value="{$vo.id}"> 
								<img data-src="holder.js/300x300" alt="{$vo.name}" src="{$vo.url}">
								<div class="caption">
					               <small> <abbr title="{$vo.name}">{$vo.update_time}</abbr></small>
					               <small> 上传：<abbr title="{$vo.member.true_name}">{$vo.member.nickname}</abbr></small>
					            </div>
								<!-- <span class="check_upload"></span> 
								<div class="caption">
								<p>
							        <button type="button" class="btn btn-primary btn-lg">选择</button> <i class="fa fa-check-square-o fa-3x"></i>
							      </p>  <button type="button" class="btn btn-primary btn-lg active">选择</button>
							      </div>-->
							</div>
							
						</div>
					{/volist}
			</div>
			
			</div>
		</div>
		

	</div> 
</div> 
	
<div class="bjui-pageFooter">
		<div class="col-md-1" style="padding: 0; ">
		<strong style="float:right;">当前容量：</strong>
	</div>
		<div class="col-md-8">
<div class="progress" style="background-color: #999;margin-bottom:0px;">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="3" aria-valuemax="100" style="width: 60%;">
    测试
  </div>
</div>
	</div>
<ul>
				<li><button type="submit" class="btn-default" data-icon="save"
						onclick="{$callback}(this)">确认</button></li>
			</ul>
</div>
<script type="text/javascript">
var upload_limit = {$file_limit};
var has_file_num = 0;
//TODO:可以优化
function picture_check_file_limit()
{
	var flag = true;
	 $("input[name='upload_ids']").each(function(){
		 has_file_num  = has_file_num + 1;
		 if(has_file_num>=upload_limit){
			 flag = false;
		 }
	 })
	 return flag;
}

function picture_check_uploaded(picture_id){
	var flag = false;
	var obj ;
	$("#thumb_div_"+picture_id).find("input[name='upload_ids']").each(function(){
		flag = true;
		obj = this;
	 })
	 if(flag){
		 //移除的情况无需判断
		 obj.remove();
		 //$("#show_check_"+picture_id).css("display","none");
		 $("#show_check_"+picture_id).removeClass("check_upload_check");
		 $("#thumb_div_"+picture_id).removeClass("thumbnail_check");
	 }else if(picture_check_file_limit()){
		 $("#thumb_div_"+picture_id).append("<input type='hidden' name='upload_ids' value='"+picture_id+"'/>");
		 $("#thumb_div_"+picture_id).addClass("thumbnail_check");
		 $("#show_check_"+picture_id).addClass("check_upload_check");
		 //$("#show_check_"+picture_id).css("display","block");
		 //$("#show_check_"+picture_id).show();
	 }else{
		 $(this).alertmsg('error', '超过上传数量'+upload_limit);
		// $("#nm_p").addClass("another"); // 追加样式 
		// $("p").removeClass("high").removeClass("another"); //移除样式
	 }
}
</script>





